/**
 * 学习目标： JSX 语法糖注意事项：
    1. 只有在脚手架中才能使用 jsx 语法
      因为JSX需要经过 babel 的编译处理，才能在浏览器中使用。脚手架中已经默认有了这个配置。
    2. JSX必须要有一个根节点， `<></>`  `<React.Fragment></React.Fragment>`
    3. 必须有结束标签 /> 
    4. JSX中语法更接近与 JavaScript
      `class` =====> `className`
      `for`========>  `htmlFor`
    5. JSX可以换行，如果JSX有多行，推荐使用`()`包裹JSX，防止自动插入分号的bug
  前期不需要背诵下来，随着练习会不断强化以上内容。
 */

import React from 'react'
import ReactDOM from 'react-dom'

// 💥 类属性需要写成 className ，class 在浏览器会有警告
// const divNode = React.createElement('div', { id: 'box', className: 'box' }, '这是一个 react 案例')
// ReactDOM.render(divNode, document.getElementById('root'))

// 底层语法创建虚拟DOM React.createElement()
const list1 = React.createElement('ul', { className: 'list' }, [
  React.createElement('li', { key: 0 }, '香蕉'),
  React.createElement('li', { key: 1 }, '橘子'),
  React.createElement('li', { key: 2 }, '苹果'),
])

// JSX语法糖 => 通过 babel插件 => 转化成JS能识别的语法 React.createElement()
const list2 = (
  <>
    <ul>
      <li>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
    <ul>
      <li>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
    <label htmlFor='name'>姓名：</label>
    <input id='name' type='text' />
  </>
)

console.log('虚拟DOM1', list1)
console.log('虚拟DOM2', list2)

ReactDOM.render(list2, document.getElementById('root'))
